<template>
	<div class="myVoures">
		<div class="bg-other user-head-info">
			<div class="user-info">
				<h3 class="user-name clearfix"><span>南有佳木</span></h3>
				<p class="about-info">
        			<span class="gender girl" title="女">女 </span>
                    <span class="u-info-learn">学习时长 <em>175小时 4分</em></span>
                	<span class="u-info-credit">
                        <a href="/u/1034896/credit">积分<em>0</em></a>
                    </span>
        			<span class="u-info-mp">
                        <a href="/u/1034896/experience">经验<em>5119</em></a>
                    </span>
                </p>
			</div>
		</div>
		<div class="search-body">
		    <div class="selectvourse">
				<template>
				  <el-select v-model="value" clearable placeholder="请选择">
				    <el-option label="全部课程" :value="1"></el-option>
				    <el-option label="UI" :value="2"></el-option>
				    <el-option label="UE" :value="3"></el-option>
				    <el-option label="java" :value="4"></el-option>
				  </el-select>
				</template>
			</div>
			<div class="course-item" v-for="i in 10">
				<a :href="handleAudit('A')" target="_blank">
					<img src="http://climg.mukewang.com/599a7ab8000179c506000338.jpg">
				</a>

				<div class="course-item-detail">
					<a :href="handleAudit('A')" target="_blank" style="text-decoration:none">
						<span style="cursor: pointer" class="highlight">JavaScript入门第一季</span>更新完毕
					</a>
					<div class="course-item-classify">
						<span>已学3%</span>
						<span>用时21分钟</span>
						<span>学习至搭建环境</span>
					</div>
					<div class="continute-btn"><a href="/video/5254" target="_blank" class="btn-red ">继续学习</a></div>
				</div>
			</div>
			<div style="clear:both;overflow:hidden">
			  <el-pagination class="pagination"
			    layout="prev, pager, next"
			    :total="50">
			  </el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'myVoures',
		data() {
	      return {
	        value: 1
	      }
	    },
		methods: {
	     	handleAudit(a){
            	return `#/homePage/videoPlay`;
            },
	    }
	}
	
</script>

<style lang="less">
.myVoures{
	margin-top:85px;
	.bg-other {
    height: 220px;
    background: url(../../../assets/img/myVourse_banner.jpg) center top no-repeat #000;
    background-size: cover;
    margin-bottom:10px;
	}
	.user-head-info .user-info {
	    position: relative;
	    width: 712px;
	    padding-left: 241px;
	    padding-right: 247px;
	    padding-top: 60px;
	    margin: 0 auto;
	    .user-name {
		    font-size: 32px;
		    font-weight: 600;
		    line-height: 40px;
		    text-align: left;
		    color: #fff;
		}
		.about-info {
		    font-size: 14px;
		    color: #fff;
		    line-height: 20px;
		    text-align: left;
		    margin-top: 6px;
		    .user-info-learn em{
		    	font-style: normal;
    			font-weight: 400;

		    }
		    .u-info-credit a,.u-info-mp a{
		    	margin-left:10px;
		    	color:#fff;
		    	text-decoration:none;
		    }
		}
	}
	.search-body{
		margin:0 auto;
		width:840px;
		.selectvourse{
			margin-bottom:10px;
			text-align:right;
		}
	}
	.course-item{
		width: 840px;
	    margin: 0 auto 8px;
	    padding-top: 24px;
	    padding-right: 32px;
	    padding-bottom: 24px;
	    background: #fff;
    	box-shadow: 0 4px 8px 0 rgba(7,17,27,.05);
    	box-sizing: border-box;
    	overflow:hidden;
    	position:relative;
	}
	.course-item img{
	    width: 210px;
	    height: 120px;
	    float: left;
	    margin-left: 32px;
	    margin-right: 32px;
	}
	.course-item .course-item-detail > a{
    	line-height: 32px;
    	font-weight: 700;
    	text-decoration:none;
    	color:#787d82;
	}
	.course-item .course-item-detail .continute-btn{
		text-align:right;
	}
	.course-item .course-item-detail .continute-btn a{
		    display: inline-block;
		    font-size: 14px;
		    border: 1px solid #f01400;
		    color: #f01400;
		    width: 90px;
		    height: 38px;
		    line-height: 38px;
		    text-align: center;
		    background-color: #fff;
		    text-decoration: none;
	}
	.course-item .course-item-detail .continute-btn a:hover{ 
		    background-color: #f01400;
            color: #fff;
	}
	.course-item .course-item-detail > a span{color:#222;font-size:14px;}
	.course-item .course-item-detail .highlight{font-size: 18px;margin-right:5px;}
	.course-item .course-item-detail .highlight:hover{
		color:red;
	}
	.course-item .course-item-detail .course-item-classify{
		margin-top:4px;
		margin-bottom: 4px;
	}
	.course-item .course-item-detail .course-item-classify span{
		line-height: 24px;
	    color: #4D555D;
	    font-size: 12px;
	    margin-right: 24px;
	    padding-left: 2px;
	    vertical-align: middle;
	}
	.course-item .course-item-detail p{
		color: #4D555D;
    	font-size: 12px;
    	line-height: 24px;
	}
	.pagination{
			text-align: center;
			margin: 20px 0  20px 0;
			.el-pager li.active{
				border-color: #525252;
				background-color: #525252;
			}
		}
}

</style>